<script setup>
import { ref } from 'vue'
import {userStore} from "@/store/index.js";
import {ElMessage} from "element-plus";
import axios from "axios";

const logOut = () => {
  localStorage.removeItem("user");
  axios.get(`/user/logout/${store.user.id}`).then(resp => {
    ElMessage.success(resp.data);
    location.href = "http://localhost:9000";
  })

}

const store = userStore();

const user = ref({
  name: store.user.username,
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})
defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ 顶部导航栏}}</h1>
  <el-header class="top-bar">
    <div class="logo">大健康</div>
    <div class="user-info">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="30" :src="user.avatar" />
          <span class="username">{{ store.user.username }}</span>
          <router-link v-if="!store.loggedIn"  to="/login" class="menu-item">登录</router-link>
          <router-link v-if="!store.loggedIn"  to="/register" class="menu-item">注册</router-link>
          <router-link v-if="store.loggedIn" @click="logOut" to="" class="menu-item">退出登录</router-link>
        </span>
        <template #dropdown>
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item>个人中心</el-dropdown-item>-->
<!--            <el-dropdown-item>退出登录</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
        </template>
      </el-dropdown>
    </div>
  </el-header>

</template>

<style scoped>

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  margin-left: 10px;
}
</style>
